<!--刘羽杰-->
<template>
  <div>
    <el-card shadow="hover" style="height: 200px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">

        <el-row>
          <el-col :span="6">
            <el-form-item label="开单日期:" prop="date">
              <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择时间" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="备注:" prop="remarks">
              <el-input v-model="ruleForm.remarks"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-table
      :data="tableData.filter(data => !search
      || data.name.toLowerCase().includes(search.toLowerCase())
      || data.date.toLowerCase().includes(search.toLowerCase()))"
      height="500"
      style="width: 100%">
      <el-table-column>
        <el-table-column label="商品编码" prop="code" header-align="center"></el-table-column>
        <template slot="header" slot-scope="scope">
         <el-row>
          <el-button size="mini" type="primary"
                     class="el-icon-circle-plus-outline"
                     @click="dialogTableVisible = true"
                     style="float: left">
            添加
          </el-button>
          <el-button size="mini" type="primary"
                     class="el-icon-circle-plus-outline"
                     @click=""
                     style="float: left">修改
          </el-button>
         </el-row>
        </template>
      </el-table-column>
      <el-table-column>
        <el-table-column label="商品名称" prop="name" header-align="center"></el-table-column>
        <template slot="header" slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary"
                       class="el-icon-circle-plus-outline"
                       @click=""
                       style="float: left">
              删除
            </el-button>
            </el-row>
        </template>
        <el-table-column label="商品型号" prop="model" header-align="center"></el-table-column>
        <el-table-column label="商品单位" prop="unit" header-align="center"></el-table-column>
        <el-table-column label="单价" prop="price" header-align="center"></el-table-column>
        <el-table-column label="数量" prop="num" header-align="center"></el-table-column>
        <el-table-column label="总金额" prop="total" header-align="center"></el-table-column>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '',
        name: ''
      },],
      search: '',
      supplierListOptions: [],
      ruleForm: {
        date: '',
        remarks: ''
      },
      rules: {
        supplierId: [
          {type: 'number', required: true, message: '请选择品牌', trigger: 'blur'},
        ],
        payable: [
          {required: true, message: '请输入应付金额', trigger: 'blur'},
        ],
        paid: [
          {required: true, message: '请输入实付金额', trigger: 'blur'},
        ],
        date: [
          {type: 'date', required: true, message: '请输入日期', trigger: 'blur'},
        ],
        remarks: [
          {message: '请输入备注', trigger: 'blur'},
        ],
        isPaid: [
          {type: 'number', required: true, message: '请选择是否付款', trigger: 'blur'},
        ]
      }
    };
  },
  methods: {
  },
  mounted() {
    /*this.loadBrandList();
    this.loadLocalRuleForm();*/
  }
}
</script>
